<template>
	<view style="width: 686rpx">
		<search-box placeholder="搜索参赛者名称" @search="searchList" @reset="reset" :reset="true"></search-box>
	</view>
	<view class="flex_sbc width-100 uni-mt-32">
		<view class="flex_fsc z-font-28 uni-mb-16" style="position: relative">
			<view
				:style="{
					width: '160rpx',
					'font-weight': tabIndex ? '400' : '700',
					color: tabIndex ? '#333' : '#008965'
				}"
				@click="tabIndex = 0"
			>
				参赛作品
			</view>
			<view
				:style="{
					width: '160rpx',
					'font-weight': !tabIndex ? '400' : '700',
					color: !tabIndex ? '#333' : '#008965'
				}"
				@click="tabIndex = 1"
			>
				大赛介绍
			</view>
			<view class="line" :style="{ left: tabIndex ? '192rpx' : '30rpx' }"></view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view
			v-if="!(goldUserInfo.type == 2 && goldUserInfo.videoUrl)"
			class="upload-button"
			@click="saveSharNormal(that)"
		>
			分享好友
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<button open-type="share">
			<view class="upload-button" style="margin: 0">分享好友</view>
		</button>
		<!-- #endif -->
	</view>
	<view v-if="tabIndex">
		<view class="flex_fsc uni-mt-40">
			<view class="line-vertical"></view>
			<view class="z-font-32 text-w">大赛介绍</view>
		</view>
		<text class="intro-rule-text">{{setting.activity_dsjs_remark}}</text>
		<view class="flex_fsc uni-mt-40">
			<view class="line-vertical"></view>
			<view class="z-font-32 text-w">评选规则</view>
		</view>
		<text class="intro-rule-text">{{setting.activity_pxgz_remark}}</text>
	</view>
	<view v-else>
		<view v-if="workList.length">
			<view
				v-for="(item, index) in workList"
				:key="index"
				class="flex_fsc uni-mt-32"
				@click="judgingRef.open(item, index)"
			>
				<image
					:src="setting.oss_pub_domain + item.videoUrl + '?x-oss-process=video/snapshot,t_1000,ar_auto'"
					class="works-cover"
					mode="aspectFill"
				></image>
				<view class="width-100">
					<view class="text-w">选手姓名：{{ item.userName }}</view>
					<view class="u-line-4 uni-mt-6 z-font-24" style="color: #525866; line-height: 32rpx">
						{{ item.intro }}
					</view>
					<view class="flex_sbc uni-mt-18 width-100">
						<view class="flex_fsc uni-color-grey">
							<view class="flex_fsc" @click.stop="like(item)">
								<image
									:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/icon_like.png'"
									class="icon-size-32 uni-mr-8"
								></image>
								<view>{{ item.likeWorkNumber || 0 }}</view>
							</view>
							<!-- #ifndef MP-WEIXIN -->
							<view class="flex_fsc uni-ml-48" @click.stop="share(item)">
								<image
									:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/icon_share_gray.png'"
									class="icon-size-32 uni-mr-8"
								></image>
								<view>{{ item.shareNumber || 0 }}</view>
							</view>
							<!-- #endif -->
						</view>
						<view v-if="goldUserInfo.type == 1" class="mark-button">评委打分</view>
					</view>
				</view>
			</view>
		</view>
		<z-no-data v-else placeholder="暂无作品" width="150"></z-no-data>
	</view>
	<judging
		ref="judgingRef"
		@done="(e) => (pageInfo.list[e.index].status = e.status)"
		@popupStatus="changeJudgingStatu"
	></judging>
</template>

<script setup>
import { ref, reactive, inject, getCurrentInstance } from 'vue';
import { getWorkList, worksShare, workLike } from '../../api/gold-medal-coach';
import Judging from './judging';
import { saveSharNormal, introText, ruleText } from './config';

const tabIndex = ref(0),
	goldUserInfo = inject('goldUserInfo'),
	{ proxy: that } = getCurrentInstance();

const workList = ref([]);
let workListArray = [];
getWorkList({ pageNum: 1, pageSize: 99 }).then((res) => {
	workList.value = res.rows;
	workListArray = res.rows;
});
function searchList(e) {
	workList.value = workListArray.filter(item => item.userName && item.userName.includes(e));
}
function reset() {
	workList.value = workListArray;
}

// 评委打分
const judgingRef = ref('');

/**
 * 分享按钮点击事件
 * @param {Object} item 点击的按钮对象
 */
function share(item) {
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneSession',
		type: 5,
		imageUrl: that.setting.oss_pub_domain + item.videoUrl + '?x-oss-process=video/snapshot,t_1000,ar_auto',
		title: '中国高尔夫金牌教练评选作品\n选手姓名：' + item.userName,
		miniProgram: {
			id: 'gh_6be15b82eac6',
			path: 'pages/gold-medal-coach/index',
			webUrl: 'http://uniapp.dcloud.io'
		},
		success: (ret) => {
			const { workId } = item;
			worksShare({ workId }).then((res) => {
				item.shareNumber = (item.shareNumber || 0) + 1;
			});
		}
	});
}

/**
 * 点赞或取消点赞
 * @param {Object} item 点击的按钮对象
 */
function like(item) {
	if (item.isLikeWork) return that.tools.alert('已点赞');
	const { workId } = item;
	workLike({ workId }).then((res) => {
		if (!item.isLikeWork) item.likeWorkNumber = (item.likeWorkNumber || 0) + 1;
		item.isLikeWork = !item.isLikeWork;
		that.tools.alert('已点赞');
	});
}

const emit = defineEmits(['popupStatus']);
function changeJudgingStatu(e) {
	emit('popupStatus', e);
}
</script>
<script>
export default {
	name: 'Entry'
};
</script>

<style scoped>
.line {
	width: 48rpx;
	height: 4rpx;
	background: #008965;
	border-radius: 30rpx;
	position: absolute;
	bottom: -10rpx;
	transition: all 0.3s;
}

.line-vertical {
	width: 8rpx;
	height: 32rpx;
	background: #008965;
	border-radius: 4rpx;
	margin-right: 20rpx;
}

.item {
	width: 686rpx;
}

.works-cover {
	width: 180rpx;
	height: 240rpx;
	border-radius: 16rpx;
	margin-right: 24rpx;
	flex-shrink: 0;
	background: #f5f5f5;
}

.mark-button {
	width: 132rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	background: linear-gradient(44deg, #32b55f 0%, #009b72 100%);
	border-radius: 16rpx;
	font-size: 24rpx;
	color: #ffffff;
}

.upload-button {
	width: 160rpx;
	height: 56rpx;
	background: linear-gradient(44deg, #32b55f 0%, #009b72 100%);
	border-radius: 28rpx;
	color: #ffffff;
	line-height: 56rpx;
	text-align: center;
	font-size: 24rpx;
}

.intro-rule-text {
	line-height: 40rpx;
	letter-spacing: 4rpx;
	text-align: justify;
	margin-top: 16rpx;
}

::v-deep button {
	margin: 0 !important;
	padding: 0 !important;
	width: 160rpx !important;
	height: 56rpx !important;
	background: transparent !important;
	border: none !important;
}
::v-deep button::after {
	border: none !important;
}
</style>
